<template>
  <view>
    <view class="doc-item" v-for="item in option" :key="item.id">
      <view class="doc-img">
        <view class="img-box">
          <image :src="item.face_image"></image>
        </view>
      </view>
      <view class="doc-right">
        <view>
          <text class="doc-name">{{ item.realname }}</text>
          <text class="doc-type allText">{{ item.title.title }}</text>
        </view>
        <view>
          <!-- <text class="doc-hospital allText">
									{{ item.hospital }}
								</text> -->
          <text class="doc-hospital allText">
            {{ item.sections.join(' ') }}
          </text>
        </view>
        <view>
          <p class="doc-infor">{{ item.technology }}</p>
        </view>
        <view class="doc-ach">
          <view class="ach allText">
            <text>接诊数</text>
            <text class="num">{{ item.order_num }}</text>
          </view>
          <!-- <view class="ach allText">
									<text>接诊率</text>
									<text class="num">{{ item.b }}</text>
								</view> -->
          <view class="ach allText">
            <text>综合评分</text>
            <text class="num">{{ item.star_avg }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    option: {
      type: Array,
      default: [],
    },
  },
}
</script>

<style lang="scss" scoped>
.doc-item {
  display: flex;
  border-bottom: 2rpx solid rgba(153, 153, 153, 1);
  padding: 22rpx 0;

  .doc-img {
    width: 120rpx;

    .img-box {
      height: 80rpx;
      width: 80rpx;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(153, 153, 153, 0.2);
    }

    image {
      height: 70rpx;
      width: 70rpx;
      border-radius: 100%;
    }
  }

  .doc-right {
    flex: 1;
    color: rgba(80, 80, 80, 1);

    .doc-name {
      font-size: 32rpx;
      font-weight: bold;
      font-size: 32rpx;
      margin-right: 16rpx;
    }

    .doc-type {
      color: rgba(166, 166, 166, 0.8);
    }

    .allText {
      font-size: 24rpx;
    }

    .doc-infor {
      font-size: 20rpx;
    }

    .doc-hospital {
      margin-right: 22rpx;
    }

    .doc-ach {
      display: flex;
      view {
        .num {
          color: rgba(65, 171, 133, 1);
        }
      }
      view:nth-child(2) {
        margin-left: 30rpx;
      }
    }
  }
}
</style>
